@import "../../../../grid";

@font-face {
  font-family: 'Open Sans';
  src: url('../../../fonts/google/OpenSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Archivo Black';
  src: url('../../../fonts/google/ArchivoBlack.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

$template-name: set6-small;

$font-family: 'Arial', sans-serif;
$custom-font-family: 'Open Sans', sans-serif;

$color-pallete: (
  // Color Name : (Testimonial title color | Background color | Author color |Role color)
        'black': (#4c4d4f, #f9f8f8, #454545, #666666),
        'blue': (#4c4d4f, #f9f8f8, #3366cc, #666666),
        'green': (#4c4d4f, #f9f8f8, #469931, #666666),
        'orange': (#4c4d4f, #f9f8f8, #ea641b, #666666),
        'purple': (#4c4d4f, #f9f8f8, #9d63bb, #666666),
        'red': (#4c4d4f, #f9f8f8, #cf2525, #666666),
        'teal': (#4c4d4f, #f9f8f8, #298c95, #666666),
        'white': (#ffffff, transparent, #fff, #fff)
);

$font-size: 16px;
$font-style: italic;
$font-weight: 400;
$font-line-height: 27px;
$font-margin-bottom: 20px;
$background_color: #f9f8f8;

.tvo-set6-small-template {
  &.tvo-testimonials-display-grid {
    .tvo-testimonial-display-item {
      padding: 30px 20px 20px 20px;
      position: relative;

      h4 {
        font-size: 23px;
        font-family: $custom-font-family !important;
        font-weight: 400;
        margin: 0;
      }

      .tvo-testimonial-quote {
        &::before {
          display: block;
          margin: 0 auto;
          content: '\0201E';
          font-family: 'Archivo Black', sans-serif !important;
          font-size: 70px;
          font-weight: 700;
          line-height: 70px;
          position: absolute;
          top: -50px;
          left: 110px;
          width: 40px;
        }
      }

      .tvo-image-and-text-wrapper {
        position: relative;

        p {
          font-size: $font-size;
          font-weight: $font-weight;
          font-family: $custom-font-family !important;
          line-height: $font-line-height;
          margin-bottom: $font-margin-bottom;
          margin-left: 150px;
        }

        .tvo-testimonial-image-cover {
          position: absolute;
          border-radius: 50%;
          width: 100px;
          height: 100px;
          left: 0;
          top: 0;
        }

        .tvo-testimonial-info {
          margin-left: 150px;
          font-size: 15px;
          line-height: $font-line-height;
          border: 1px solid transparent;

          .tvo-testimonial-name {
            text-transform: uppercase;
            font-weight: 600;
            display: block;
          }
        }
      }
    }
  }
}

@each $name, $color in $color-pallete {
  .tvo-set6-small-template {
    &.tve_#{$name} {
      .tvo-apply-background {
        background-color: nth($color, 2);
      }

      h4 {
        color: nth($color, 1);
      }

      p {
        color: nth($color, 4);
      }

      .tvo-testimonial-quote {
        &::before {
          //color: nth($color, 3);
          /* SUPP-6422 - can't edit quote color after applying color on :before */
          color: inherit;
        }
      }

      .tvo-testimonial-info {
        .tvo-testimonial-name {
          color: nth($color, 3);
        }

        .tvo-testimonial-role {
          color: nth($color, 4);

          a {
            color: inherit;
          }
        }
      }
    }
  }
}
